<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-input
        v-model="listQuery.userId"
        clearable
        class="filter-item"
        style="width: 200px;"
        placeholder="请输入用户ID"
      />
      <el-input
        v-model="listQuery.valueId"
        clearable
        class="filter-item"
        style="width: 200px;"
        placeholder="请输入商品ID"
      />
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
      <el-button
        :loading="downloadLoading"
        class="filter-item"
        type="primary"
        icon="el-icon-download"
        @click="handleDownload"
      >导出</el-button>
      <el-button v-permission="['POST /admin/comment/addComments']" class="filter-item" type="primary" icon="el-icon-circle-plus" @click="handleAdd">新增</el-button>
    </div>

    <!-- 查询结果 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="正在查询中。。。"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="用户ID" prop="userId" />

      <el-table-column align="center" label="商品ID" prop="valueId" />

      <el-table-column align="center" label="打分" prop="star">
        <template slot-scope="scope">
          <el-rate v-model="scope.row.star" disabled show-score text-color="#ff9900"></el-rate>
        </template>
      </el-table-column>

      <el-table-column align="center" label="评论内容" prop="content" />

      <!-- <el-table-column align="center" label="评论图片" prop="picUrls">
        <template slot-scope="scope">
          <el-image v-for="item in scope.row.picUrls" :key="item" :src="item" :preview-src-list="scope.row.picUrls" :lazy="true" style="width: 40px; height: 40px; margin-right: 5px;" />
        </template>
      </el-table-column>-->

      <el-table-column align="center" label="时间" prop="addTime" />
      <el-table-column align="center" label="是否显示" prop="state">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.state"
            active-color="#13ce66"
            inactive-color="#dcdfe6"
            @change="changeStatus(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="200" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <!-- <el-button type="primary" size="mini" @click="handleReply(scope.row)">回复</el-button> -->
          <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

    <!-- 评论回复 -->
    <!-- <el-dialog :visible.sync="replyFormVisible" title="回复">
      <el-form
        ref="replyForm"
        :model="replyForm"
        status-icon
        label-position="left"
        label-width="100px"
        style="width: 400px; margin-left:50px;"
      >
        <el-form-item label="回复内容" prop="content">
          <el-input
            v-model="replyForm.content"
            :autosize="{ minRows: 4, maxRows: 8}"
            type="textarea"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="replyFormVisible = false">取消</el-button>
        <el-button type="primary" @click="reply">确定</el-button>
      </div>
    </el-dialog> -->
    <!-- 新增评论 -->
    <el-dialog :visible.sync="addCommentVisible" title="新增评论">
      <el-form ref="addCommentForm" :model="addCommentForm" status-icon label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
        <el-form-item label="商品ID" prop="goodIds">
          <el-input v-model="arr" />
          <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="chooseGoods">选择商品</el-button>
        </el-form-item>
        <el-form-item label="打分" prop="grade">
          <el-select v-model="addCommentForm.grade" placeholder="请选择">
            <el-option :value="1" label="1" />
            <el-option :value="2" label="2" />
            <el-option :value="3" label="3" />
            <el-option :value="4" label="4" />
            <el-option :value="5" label="5" />
          </el-select>
        </el-form-item>
        <el-form-item label="评论内容" prop="content">
          <el-input type="textarea" v-model="addCommentForm.content" />
        </el-form-item>
        <el-form-item label="添加人" prop="addUsername">
          <el-input v-model="addCommentForm.addUsername" />
        </el-form-item>
        <el-form-item label="时间" prop="addTime">
          <el-date-picker v-model="addCommentForm.addTime" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addCommentVisible = false">取消</el-button>
        <el-button type="primary" @click="addComment">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="dialogForm" label-width="100px">
        <el-row>
          <el-col :span="20">
            <el-form-item label="搜索商品：">
              <el-input v-model="dialogForm.searchinput" placeholder="请输入商品名称" />
            </el-form-item>
          </el-col>
          <el-col :span="3" style="text-align:right;">
            <el-button @click="searchbtn">搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-table v-loading="Loading" :data="dialoglist" element-loading-text="正在查询中。。。" border fit highlight-current-row style="margin-top:10px" @selection-change="handleSelection">
        <el-table-column type="selection" width="60" align="center" />

        <el-table-column align="center" label="商品ID" prop="goodsId" />

        <el-table-column align="center" label="名称" prop="goodsName" />

        <el-table-column align="center" label="价格">
          <template slot-scope="scope">
            <div>{{ scope.row.retailPrice }}</div>
          </template>
        </el-table-column>

        <el-table-column align="center" label="货号">
          <template slot-scope="scope">
            <div>{{ scope.row.goodsSn }}</div>
          </template>
        </el-table-column>

        <el-table-column align="center" label="图片">
          <template slot-scope="scope">
            <img v-if="scope.row.picUrl" :src="scope.row.picUrl" width="40">
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page.sync="Loadpage"
        :page-sizes="[5, 10, 20, 40,100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="LoadTotal"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="sureBtn">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { listComment, deleteComment,addComments, editCommentStatus,getGoods } from "@/api/comment";
  import { replyComment } from "@/api/order";
  import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination

  export default {
    name: "Comment",
    components: { Pagination },
    data() {
      return {
        Loading: false,
        arr: [],
        addCommentForm:{
          addUsername: undefined,
          goodIds: undefined,
          grade: undefined,
          content: undefined,
          addTime: undefined,
        },
        addCommentVisible: false,
        Loadlimit: 10,
        Loadpage: 1,
        LoadTotal: 0,
        dialoglist: [],
        dialogForm: {
          searchinput: ''
        },
        dialogFormVisible: false,
        list: [],
        total: 0,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 20,
          userId: undefined,
          valueId: undefined,
          sort: "add_time",
          order: "desc",
        },
        downloadLoading: false,
        replyForm: {
          commentId: 0,
          content: "",
        },
        star:1,
        replyFormVisible: false,
      };
    },
    created() {
      this.getList();
    },
    methods: {
      addComment() {
        addComments(this.addCommentForm)
          .then((response) => {
            this.addCommentVisible = false;
            this.addCommentForm = {
              addUsername: undefined,
              goodIds: undefined,
              grade: undefined,
              content: undefined,
              addTime: undefined,
            }
            this.arr = []
            this.$notify.success({
              title: "成功",
              message: "新增成功",
            });
            this.getList()
          })
          .catch((response) => {
            this.$notify.error({
              title: "失败",
              message: response.data.errmsg,
            });
          });
      },
      sureBtn(){
        if (this.arr.length == 0) {
          this.$message({
            type: 'error',
            message: '请选择商品'
          })
        } else {
          this.dialogFormVisible = false
        }
      },
      handleAdd(){
        this.addCommentVisible = true;
      },
      handleSelection(val) {
        var arr = []
        for (var i = 0; i < val.length; i++) {
          arr.push(val[i].goodsId)
        }
        this.addCommentForm.goodIds = arr
        this.arr = arr
      },
      handleSizeChange(val) {
        this.Loadlimit = val
      },
      handleCurrentChange(val) {
        this.Loadpage = val
        this.searchbtn()
      },
      searchbtn() {
        this.searchdialogdata(this.dialogForm.searchinput)
      },
      searchdialogdata(e) {
        getGoods({ limit: this.Loadlimit, page: this.Loadpage, goodsName: e }).then(response => {
          if (response.data.errno == 0) {
            this.dialoglist = response.data.data.list
            this.LoadTotal = response.data.data.total
          } else {
            this.dialoglist = []
            this.LoadTotal = null
          }
        })
      },
      chooseGoods(){
        this.dialogFormVisible = true
        this.searchdialogdata()
      },
      getList() {
        this.listLoading = true;
        listComment(this.listQuery)
          .then((response) => {
            this.list = response.data.data.list;
            this.total = response.data.data.total;
            this.listLoading = false;
          })
          .catch(() => {
            this.list = [];
            this.total = 0;
            this.listLoading = false;
          });
      },
      changeStatus: function (row) {
        editCommentStatus({ id: row.id, state: row.state })
          .then((response) => {
            this.$notify.success({
              title: "成功",
              message: "操作成功",
            });
          })
          .catch((response) => {
            this.$notify.error({
              title: "失敗",
              message: response.data.errmsg,
            });
          });
      },
      handleFilter() {
        this.listQuery.page = 1;
        this.getList();
      },
      handleReply(row) {
        this.replyForm = { commentId: row.id, content: "" };
        this.replyFormVisible = true;
      },
      reply() {
        replyComment(this.replyForm)
          .then((response) => {
            this.replyFormVisible = false;
            this.$notify.success({
              title: "成功",
              message: "回复成功",
            });
          })
          .catch((response) => {
            this.$notify.error({
              title: "失败",
              message: response.data.errmsg,
            });
          });
      },
      handleDelete(row) {
        deleteComment(row).then((response) => {
          this.$notify({
            title: "成功",
            message: "删除成功",
            type: "success",
            duration: 2000,
          });
          this.getList();
        });
      },
      handleDownload() {
        this.downloadLoading = true;
        import("@/vendor/Export2Excel").then((excel) => {
          const tHeader = [
            "评论ID",
            "用户ID",
            "商品ID",
            "评论",
            "评论图片列表",
            "评论时间",
          ];
          const filterVal = [
            "id",
            "userId",
            "valueId",
            "content",
            "picUrls",
            "addTime",
          ];
          excel.export_json_to_excel2(
            tHeader,
            this.list,
            filterVal,
            "商品评论信息"
          );
          this.downloadLoading = false;
        });
      },
    },
  };
</script>
